<template>
  <div>
    <el-button type="primary" size="mini" @click="toExcel()"
      >导出Excel</el-button
    >
    <el-button type="primary" size="mini" @click="toPDF()">导出PDF</el-button>
    <el-button type="primary" size="mini" @click="toPNG()">导出PNG</el-button>
    <div ref="gantt" class="gantt"></div>
  </div>
</template>

<script>
import "./api";
import { gantt } from "dhtmlx-gantt";
import {
  listTask,
  getTask,
  delTask,
  addTask,
  updateTask,
} from "@/api/myTask/task";
export default {
  name: "gantt",
  props: {
    tasks: {
      type: Object,
      default() {
        return {
          data: [],
          links: [],
        };
      },
    },
  },
  data() {
    return {
      //任务ID
      projectId: 0,
      // 新任务参数
      formParams: {
        tasksId: null,
        projectId: null,
        tasksName: null,
        planBeginTime: null,
        planEndTime: null,
        taskOwner: null,
        taskStatus: null,
        isMilestone: null,
        parentId: null,
      },
    };
  },

  mounted: function () {
    var that = this;
    gantt.config.xml_date = "%Y-%m-%d";
    gantt.config.start_date = new Date(2022, 1, 1);
    gantt.config.end_date = new Date(2025, 1, 1);

    gantt.config.scale_unit = "day";
    gantt.config.date_scale = "%d";
    gantt.config.min_column_width = 60;
    gantt.config.duration_unit = "day";
    gantt.config.scale_height = 20 * 3;
    gantt.config.row_height = 28;

    gantt.config.subscales = [
      {
        unit: "month",
        step: 1,
        date: "%Y年%M",
      },
      {
        unit: "week",
        step: 1,
        date: "第%W周",
      },
    ];
    gantt.templates.scale_cell_class = function (date) {
      //调试器;
      if (date.getDay() == 0 || date.getDay() == 6) {
        return "weekend";
      }
    };
    gantt.templates.task_cell_class = function (item, date) {
      // debugger;
      if (date.getDay() == 0 || date.getDay() == 6) {
        return "weekend";
      }
    };

    //     var textEditor = {type: "text", map_to: "text"};
    //     var dateEditor =  {type: "date", map_to: "start_date", min: new Date(2020, 0, 1), max: new Date(2030, 0, 1)};

    //    gantt.config.columns = [
    //     {name: "text", label: "Task name", tree: true, width: "*", editor: textEditor},
    //     {name: "start_date", label: "Start time", align: "center", editor: dateEditor}
    // ];
    gantt.i18n.setLocale("cn");
    gantt.init(this.$refs.gantt);
    //添加后触发  直接录入信息
    gantt.attachEvent("onAfterTaskAdd", function (id, item) {
      that.formReset();
      that.formParams.projectId = that.projectId;
      that.formParams.tasksName = "新任务";
      let startTime = item.start_date.getTime();
      that.formParams.planBeginTime = startTime;
      let endTime = item.end_date.getTime();
      that.formParams.planEndTime = endTime;
      that.formParams.parentId = item.parent;

      addTask(that.formParams).then((response) => {
        that.$modal.msgSuccess("新增成功");
      });
    });
    //移动进度后触发
    gantt.attachEvent("onAfterTaskDrag", function (id, mode, e) {});
    //移动任务后触发
    gantt.attachEvent("onAfterTaskMove", function (id, parent, tindex) {});
    //删除任务后触发  直接根据id删除
    gantt.attachEvent("onAfterTaskDelete", function (id, item) {
      delTask(item.id);
    });
    //修改任务后触发 直接根据id修改
    gantt.attachEvent("onAfterTaskUpdate", function (id, item) {
      that.formReset();
      that.formParams.tasksId = item.id;
      that.formParams.tasksName = item.text;
      let startTime = item.start_date.getTime();
      that.formParams.planBeginTime = startTime;
      let endTime = item.end_date.getTime();
      that.formParams.planEndTime = endTime;
      updateTask(that.formParams).then((response) => {});
    });
    //创建新链接后触发 更新对应id的父id  有互相连线的问题  考虑每次连线刷新？
    gantt.attachEvent("onAfterLinkAdd", function (id, item) {
      that.formReset();

      that.formParams.tasksId = item.target;
      that.formParams.parentId = item.source;
      updateTask(that.formParams).then((response) => {});
    });
    //删除链接后触发 直接根据id删除其父id即可
    gantt.attachEvent("onAfterLinkDelete", function (id, item) {
      that.formReset();
      that.formParams.tasksId = item.target;
      that.formParams.parentId = 0;
      updateTask(that.formParams).then((response) => {});
    });
  },
  created() {
    this.projectId = this.$route.params && this.$route.params.projectId;
  },
  methods: {
    formReset() {
      this.formParams = {
        tasksId: null,
        projectId: null,
        tasksName: null,
        planBeginTime: null,
        planEndTime: null,
        taskOwner: null,
        taskStatus: null,
        isMilestone: null,
        parentId: null,
      };
    },
    ganttInit() {
      gantt.parse(this.$props.tasks);
    },
    toExcel() {
      gantt.exportToExcel({
        name: "document.xlsx",
        columns: [
          { id: "text", header: "Title", width: 150 },
          { id: "start_date", header: "Start date", width: 250, type: "date" },
        ],
        server: "https://export.dhtmlx.com/gantt/project",
        visual: true,
        cellColors: true,
        data: this.$props.tasks,
        date_format: "dddd d, mmmm yyyy",
      });
    },
    toPNG() {
      gantt.exportToPNG({
        name: "document.png",
        columns: [
          { id: "text", header: "Title", width: 150 },
          { id: "start_date", header: "Start date", width: 250, type: "date" },
        ],
        server: "https://export.dhtmlx.com/gantt/project",
        visual: true,
        cellColors: true,
        data: this.$props.tasks,
        date_format: "dddd d, mmmm yyyy",
      });
    },
    toPDF() {
      gantt.exportToPDF({
        name: "document.pdf",
        columns: [
          { id: "text", header: "Title", width: 150 },
          { id: "start_date", header: "Start date", width: 250, type: "date" },
        ],
        server: "https://export.dhtmlx.com/gantt/project",
        visual: true,
        cellColors: true,
        data: this.$props.tasks,
        date_format: "dddd d, mmmm yyyy",
      });
    },
  },
};
</script>
 
<style>
@import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
.gantt {
  margin-top: 15px;
  min-height: 600px;
}
.weekend {
  background: #fdf6eca0;
}

.gantt_selected .weekend {
  background: #faecd8;
}
</style>